<!--new-->

<template>
    <div class="admin-page">
        <div class="page-header">
            <div class="table-header">
                <div class="table-actions">
                    <el-button type="primary" @click="handleAddAdmin" size="small" icon="el-icon-plus">添加分类</el-button>
                </div>
            </div>
            <!-- 分类树结构展示 -->
            <el-table
                height="560"
                :data="categoryTree"
                row-key="id"
                :tree-props="{children: 'children'}"
                border
                style="width: 100%"
                :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}"
                size="small"
            >
                <el-table-column align="center" prop="id" label="ID"/>
                <el-table-column align="center" prop="sort" label="排序" />
                <el-table-column align="center" prop="name" label="分类名称" />
                <el-table-column prop="icon" label="icon" width="80px">
                    <template slot-scope="scope">
                        <img style="width: 50px;height: 50px" :src="$appConfig.imgPath + scope.row.icon"/>
                    </template>
                </el-table-column>
<!--                <el-table-column label="分类">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{ scope.row.type === 1? '正常商品' : '特殊商品' }}-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--              -->
                <el-table-column align="center" prop="create_time" label="创建时间" />
                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
                        <el-button type="text" size="small" @click="handleDelete(scope.row)" icon="el-icon-delete" class="delete-btn">删除</el-button>
                        <el-button type="success" size="small" @click="handleStateChange(scope.row)" :style="{ backgroundColor: scope.row.state === 0? 'red' : '#67c23a' }">
                            {{ scope.row.state === 0? '隐藏' : '显示' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total,  pager, next, jumper" :total="total" />
            <!-- 添加分类对话框 -->
            <el-dialog title="添加分类" :visible.sync="addDialogVisible" width="700px" :close-on-click-modal="false">
                <el-form :model="adminForm" :rules="adminRules" ref="adminForm" label-width="100px" size="small">
                    <el-form-item label="分类名称" prop="name">
                        <el-input style="width: 90%;" v-model="adminForm.name" />
                    </el-form-item>
                    <el-form-item label="父级分类" prop="pid">
                        <el-tree
                            :data="categoryTreeList"
                            :props="treeProps"
                            node-key="id"
                            highlight-current
                            :expand-on-click-node="false"
                            @node-click="handleTreeSelect"
                            :default-checked-keys="[adminForm.pid]"
                            :default-expanded-keys="[adminForm.pid]"
                            style="width: 90%;"
                        />
                    </el-form-item>
                    <el-form-item label="分类类型">
                        <el-radio-group v-model="adminForm.type">
                            <el-radio :label="1">复购分类</el-radio>
                            <el-radio :label="2">特殊分类</el-radio>
                            <el-radio :label="3">积分分类</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序" prop="name">
                        <el-input style="width: 90%;" v-model="adminForm.sort" />
                    </el-form-item>
                    <el-form-item label="icon" prop="icon">
                        <el-upload
                            class="avatar-uploader"
                            action="/admin/shop/imgUpload"
                            :headers="{ token: userInfo.token }"
                            :show-file-list="false"
                            :on-success="handleCoverSuccess"
                            :before-upload="beforeCoverUpload">
                            <img v-if="adminForm.icon" :src="$appConfig.imgPath + adminForm.icon"
                                 class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="是否显示">
                        <el-radio-group v-model="adminForm.state">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="0">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                </div>
            </el-dialog>
            <!-- 编辑商品对话框 -->
            <el-dialog title="编辑商品" :visible.sync="editDialogVisible" width="700px" :close-on-click-modal="false">
                <el-form :model="adminForm" :rules="adminRules" ref="adminForm" label-width="100px" size="small">
                    <el-form-item label="分类名称" prop="name">
                        <el-input style="width: 90%;" v-model="adminForm.name" />
                    </el-form-item>
                    <el-form-item label="父级分类" prop="pid">
                        <el-tree
                            :data="categoryTreeList"
                            :props="treeProps"
                            node-key="id"
                            highlight-current
                            :expand-on-click-node="false"
                            @node-click="handleTreeSelect"
                            :default-checked-keys="[adminForm.pid]"
                            :default-expanded-keys="[adminForm.pid]"
                            style="width: 90%;"
                        />
                    </el-form-item>
                    <el-form-item label="分类类型">
                        <el-radio-group v-model="adminForm.type">
                            <el-radio :label="1">复购分类</el-radio>
                            <el-radio :label="2">特殊分类</el-radio>
                            <el-radio :label="3">积分分类</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序" prop="name">
                        <el-input style="width: 90%;" v-model="adminForm.sort" />
                    </el-form-item>
                    <el-form-item label="icon" prop="icon">
                        <el-upload
                            class="avatar-uploader"
                            action="/admin/shop/imgUpload"
                            :headers="{ token: userInfo.token }"
                            :show-file-list="false"
                            :on-success="handleCoverSuccess"
                            :before-upload="beforeCoverUpload">
                            <img v-if="adminForm.icon" :src="$appConfig.imgPath + adminForm.icon"
                                 class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="是否显示">
                        <el-radio-group v-model="adminForm.state">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="0">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import {mapState} from "vuex";

export default {
    data() {
        return {
            categoryTree: [],
            categoryTreeList: [],
            treeProps: {
                children: 'children',
                label: 'name',
                value: 'id',
            },
            currentPage: 1,
            pageSize: 25,
            total: 0,
            form:{
                search:"",
                clas_id:"",
                state:"",
            },
            addDialogVisible: false,
            editDialogVisible: false,
            adminForm: {
                name: '',
                sort: 1,
                state: 1,
                type: 1,
                pid: 0,
            },
            adminRules: {
                name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
            },
            categoryList:[],

            imageUrl: '',
            imageUrl1: '',


        };
    },
    mounted() {
        this.fetchAdminList();
        this.getTreeList();
    },
    computed: {
        ...mapState(["userInfo"]),
    },
    methods: {
        getTreeList(){
            const params = {
                page: this.currentPage,
                limit: this.pageSize
            };
            this.$http.get('/admin/clas/getCateList', { params }).then(result => {
                if (result.code === 200) {
                    // 在最前面加顶级分类
                    const topNode = { id: 0, name: '顶级分类', children: [] };
                    this.categoryTreeList = [topNode, ...(result.data || [])];
                }
            });
        },
        fetchAdminList() {
            const params = {
                page: this.currentPage,
                limit: this.pageSize
            };
            this.$http.get('/admin/clas/lists', { params }).then(result => {
                if (result.code === 200) {
                    // 适配树形结构
                    const treeData = result.data.data;
                    this.categoryTree = Array.isArray(treeData) ? treeData : Object.values(treeData);
                    this.total = result.data.total || this.categoryTree.length;
                } else {
                    this.$message.error(result.msg);
                }
            });
        },
        handleCoverSuccess(res, file) {
            if (res.code === 200 && res.data) {
                try {
                    const imgPath = res.data;
                    this.adminForm.icon = Array.isArray(imgPath) ? imgPath.join('') : imgPath;
                    this.$nextTick(() => {
                        this.$forceUpdate();
                    });
                    this.$message.success('icon上传成功');
                } catch (error) {
                    console.error('处理icon上传响应失败:', error);
                    this.$message.error('处理icon数据失败');
                }
            } else {
                this.$message.error(res.msg || 'icon上传失败');
            }
        },
        beforeCoverUpload(file) {
            const isValidFormat = ['image/jpeg', 'image/png'].includes(file.type);
            const isLt20M = file.size / 1024 / 1024 < 20;

            if (!isValidFormat) {
                this.$message.error('icon只能是 JPG/PNG 格式!');
                return false;
            }
            if (!isLt20M) {
                this.$message.error('icon大小不能超过 20MB!');
                return false;
            }
            return true;
        },
        // 详情图上传相关方法
        handleDetailSuccess(res, file) {
            if (res.code === 200 && res.data) {
                try {
                    const imgPath = Array.isArray(res.data) ? res.data.join('') : res.data;
                    const newImages = this.adminForm.icon ? this.adminForm.icon.split(',') : [];
                    newImages.push(imgPath);
                    this.adminForm.icon = newImages.join(',');
                    this.detailImages.push({
                        url: imgPath,
                        name: file.name
                    });
                    this.$nextTick(() => {
                        this.$forceUpdate();
                    });
                    this.$message.success('详情图上传成功');
                } catch (error) {
                    console.error('处理详情图上传响应失败:', error);
                    this.$message.error('处理详情图数据失败');
                }
            } else {
                this.$message.error(res.msg || '详情图上传失败');
            }
        },
        beforeDetailUpload(file) {
            const isValidFormat = ['image/jpeg', 'image/png'].includes(file.type);
            const isLt20M = file.size / 1024 / 1024 < 20;

            if (!isValidFormat) {
                this.$message.error('详情图只能是 JPG/PNG 格式!');
                return false;
            }
            if (!isLt20M) {
                this.$message.error('详情图大小不能超过 20MB!');
                return false;
            }
            return true;
        },
        handleRemove(file) {
            const index = this.detailImages.findIndex(item => item.url === file.url);
            if (index > -1) {
                this.detailImages.splice(index, 1);
                const images = this.adminForm.icon.split(',');
                images.splice(index, 1);
                this.adminForm.icon = images.join(',');
            }
        },
        handlePreview(file) {
            this.previewImage = file.url;
            this.previewVisible = true;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchAdminList();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.fetchAdminList();
        },
        handleAddAdmin() {
            this.adminForm = {
                name: '',
                sort: 1,
                state: 1,
                type: 1,
                pid: 0,
            };
            this.$refs.adminForm && this.$refs.adminForm.clearValidate();
            this.addDialogVisible = true;
        },
        handleEdit(row) {
            this.$http.get(`/admin/clas/edit`, {params: {id: row.id}}).then(result => {
                if (result.code == 200) {
                    this.adminForm.name = result.data.name;
                    this.adminForm.sort = result.data.sort;
                    this.adminForm.state = result.data.state;
                    this.adminForm.type = result.data.type;
                    this.adminForm.id = result.data.id;
                    this.adminForm.icon = result.data.icon;
                    this.adminForm.pid = result.data.pid || 0;
                    this.editDialogVisible = true;
                    this.$nextTick(() => {
                        this.$refs.adminForm && this.$refs.adminForm.clearValidate();
                    });
                } else {
                    this.$message.error(result.msg || '获取详情失败');
                }
            }).catch(error => {
                console.error('获取详情失败:', error);
                this.$message.error('获取详情失败');
            });
        },
        handleStateChange(row) {
            const newState = row.state === 1? 0 : 1;
            this.$http.post('/admin/clas/del', {
                name:row.name,
                type:row.type,
                sort:row.sort,
                id:row.id,
                state: newState
            }).then(result => {
                if (result.code === 200) {
                    this.$message.success('状态更新成功');
                    this.fetchAdminList();
                } else {
                    this.$message.error(result.msg || '状态更新失败');
                }
            });
        },
        handleDelete(data) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post('/admin/clas/del', {
                    id: data.id,
                    state: "-1"
                }).then(result => {
                    if (result.code === 200) {
                        this.$message.success(result.msg);
                        this.fetchAdminList();
                        this.getTreeList();
                    } else {
                        this.$message.error(result.msg);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        submitForm() {
            this.$refs.adminForm.validate(valid => {
                if (valid) {
                    console.log(this.adminForm)
                    this.$http.post('/admin/clas/edit', this.adminForm).then(result => {
                        if (result.code === 200) {
                            this.$message.success(result.msg);
                            this.addDialogVisible = false;
                            this.editDialogVisible = false;
                            this.fetchAdminList();
                        } else {
                            this.$message.error(result.msg);
                        }
                    });
                }
            });
        },
        handleTreeSelect(node) {
            this.adminForm.pid = node.id;
        }
    }
};
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
/deep/ .el-dialog__header{
    padding: 10px !important;
    text-align: center;
}
.admin-page {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

    .page-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f2f5;

        .header-title {
            font-size: 20px;
            font-weight: 600;
            color: #1f2937;
            line-height: 1.4;
        }
    }

    .table-header {
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-title {
            font-size: 16px;
            font-weight: 500;
            color: #374151;
        }

        .table-actions {
            .el-button {
                margin-left: 12px;
                transition: all 0.3s;

                &:hover {
                    transform: translateY(-1px);
                }
            }
        }
    }

    .el-tabs {
        margin-top: 16px;

        :deep(.el-tabs__header) {
            margin-bottom: 28px;
            border-bottom: 2px solid #f0f2f5;
        }

        :deep(.el-tabs__item) {
            font-size: 15px;
            padding: 0 28px;
            height: 44px;
            line-height: 44px;
            transition: all 0.3s;

            &.is-active {
                color: #2563eb;
                font-weight: 500;
            }

            &:hover {
                color: #2563eb;
            }
        }

        :deep(.el-tabs__active-bar) {
            height: 2px;
            background-color: #2563eb;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
    }

    .el-table {
        margin-top: 12px;
        border-radius: 8px;
        overflow: hidden;

        :deep(th) {
            background-color: #f9fafb !important;
            font-weight: 500;
            color: #4b5563;
        }

        :deep(td) {
            padding: 12px 0;
        }

        .delete-btn {
            color: #dc2626;
            transition: all 0.3s;

            &:hover {
                color: #ef4444;
            }
        }
    }

    .el-pagination {
        margin-top: 24px;
        padding: 12px 0;
        text-align: right;

        :deep(.el-pagination__total) {
            margin-right: 12px;
        }

        :deep(.btn-prev),
        :deep(.btn-next) {
            border-radius: 4px;
            background-color: #fff;
        }

        :deep(.el-pager li) {
            border-radius: 4px;
            background-color: #fff;

            &.active {
                background-color: #2563eb;
            }
        }
    }

    .el-dialog {
        border-radius: 12px;
        overflow: hidden;
        max-height: 90vh;
        display: flex;
        flex-direction: column;

        :deep(.el-dialog__header) {
            padding: 20px 24px !important;
            border-bottom: 1px solid #f0f2f5;
            margin: 0;

            .el-dialog__title {
                font-size: 18px;
                font-weight: 600;
                color: #1f2937;
            }
        }

        :deep(.el-dialog__body) {
            padding: 32px 24px;
            flex: 1;
            overflow-y: auto;

            .el-form-item {
                .el-input,
                .el-select {
                    width: 320px;
                }
            }
        }

        :deep(.el-tree) {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            padding: 10px;
        }

        :deep(.el-dialog__footer) {
            padding: 16px 24px;
            border-top: 1px solid #f0f2f5;
        }

        :deep(.el-form-item__label) {
            font-weight: 500;
            color: #374151;
        }

        :deep(.el-button) {
            padding: 8px 20px;
            transition: all 0.3s;

            &:hover {
                transform: translateY(-1px);
            }
        }
    }
}
.tip-text {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    display: block;
}
/deep/ .el-tab-pane{
    height: 650px;
    overflow-y: auto;
}

</style>


<!--old-->

<!--
<template>
    <div class="admin-page">
        <div class="page-header">
            <div class="table-header">
                <div class="table-actions">
                    <el-button type="primary" @click="handleAddAdmin" size="small" icon="el-icon-plus">添加商品</el-button>
                </div>

            </div>
            <el-table  height="560" :data="adminList" border style="width: 100%" :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}" size="small">
                <el-table-column align="center" prop="id" label="ID"/>
                <el-table-column align="center" prop="name" label="分类名称" />
                &lt;!&ndash;                <el-table-column label="分类">&ndash;&gt;
                &lt;!&ndash;                    <template slot-scope="scope">&ndash;&gt;
                &lt;!&ndash;                        {{ scope.row.type === 1? '正常商品' : '特殊商品' }}&ndash;&gt;
                &lt;!&ndash;                    </template>&ndash;&gt;
                &lt;!&ndash;                </el-table-column>&ndash;&gt;
                &lt;!&ndash;              &ndash;&gt;
                <el-table-column align="center" prop="create_time" label="创建时间" />
                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
                        <el-button type="text" size="small" @click="handleDelete(scope.row)" icon="el-icon-delete" class="delete-btn">删除</el-button>
                        <el-button type="success" size="small" @click="handleStateChange(scope.row)" :style="{ backgroundColor: scope.row.state === 0? 'red' : '#67c23a' }">
                            {{ scope.row.state === 0? '隐藏' : '显示' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total,  pager, next, jumper" :total="total" />
            &lt;!&ndash; 添加商品对话框 &ndash;&gt;
            <el-dialog title="添加商品" :visible.sync="addDialogVisible" width="700px" :close-on-click-modal="false">
                <el-form :model="adminForm" :rules="adminRules" ref="adminForm" label-width="100px" size="small">
                    <el-form-item label="分类名称" prop="name">
                        <el-input style="width: 90%;" v-model="adminForm.name" />
                    </el-form-item>
                    <el-form-item label="是否显示">
                        <el-radio-group v-model="adminForm.state">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="0">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false" size="small">取消</el-button>
                    <el-button type="primary" @click="submitForm" size="small">确定</el-button>
                </div>
            </el-dialog>
            &lt;!&ndash; 编辑商品对话框 &ndash;&gt;
            <el-dialog title="编辑商品" :visible.sync="editDialogVisible" width="700px" :close-on-click-modal="false">
                <el-form :model="adminForm" :rules="adminRules" ref="adminForm" label-width="100px" size="small">
                    <el-form-item label="分类名称" prop="name">
                        <el-input style="width: 90%;" v-model="adminForm.name" />
                    </el-form-item>
                    <el-form-item label="是否显示">
                        <el-radio-group v-model="adminForm.state">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="0">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false" size="small">取消</el-button>
                    <el-button type="primary" @click="submitForm" size="small">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";

export default {
    data() {
        return {
            adminList: [],
            currentPage: 1,
            pageSize: 25,
            total: 0,
            form:{
                search:"",
                clas_id:"",
                state:"",
            },
            addDialogVisible: false,
            editDialogVisible: false,
            adminForm: {
                name: '',
                sort: 0,
                state: 1,
                type: 1,

            },
            adminRules: {
                name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],

            },
            categoryList:[],

            imageUrl: '',
            imageUrl1: '',


        };
    },
    mounted() {
        this.fetchAdminList();
    },

    methods: {
        fetchAdminList() {
            const params = {
                page: this.currentPage,
                limit: this.pageSize
            };
            this.$http.get('/admin/clas/lists', { params }).then(result => {
                if (result.code === 200) {
                    const dataObj = result.data.data;
                    const newListData = [];
                    for (const key in dataObj) {
                        if (dataObj.hasOwnProperty(key)) {
                            newListData.push(dataObj[key]);
                        }
                    }
                    this.adminList = newListData;
                    this.total = result.data.total || newListData.length;
                } else {
                    this.$message.error(result.msg);
                }
            });
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchAdminList();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.fetchAdminList();
        },
        handleAddAdmin() {
            this.adminForm = {
                name: '',
                sort: 0,
                state: 1,
                type: 1,
            };
            this.$refs.adminForm && this.$refs.adminForm.clearValidate();
            this.addDialogVisible = true;
        },
        handleEdit(row) {
            // 调用接口获取详细数据
            this.$http.get(`/admin/clas/edit`, {params: {id: row.id}}).then(result => {
                if (result.code == 200) {
                    this.adminForm.name = result.data.name;
                    this.adminForm.state = result.data.state;
                    this.adminForm.id = result.data.id;
                    this.editDialogVisible = true;

                    // 等待 DOM 更新后设置表单验证状态
                    this.$nextTick(() => {
                        this.$refs.adminForm && this.$refs.adminForm.clearValidate();
                    });
                } else {
                    this.$message.error(result.msg || '获取详情失败');
                }
            }).catch(error => {
                console.error('获取详情失败:', error);
                this.$message.error('获取详情失败');
            });
        },

        handleStateChange(row) {
            const newState = row.state === 1? 0 : 1;
            this.$http.post('/admin/clas/del', {
                name:row.name,
                type:row.type,
                sort:row.sort,
                id:row.id,
                state: newState
            }).then(result => {
                if (result.code === 200) {
                    this.$message.success('状态更新成功');
                    this.fetchAdminList();
                } else {
                    this.$message.error(result.msg || '状态更新失败');
                }
            });
        },
        handleDelete(data) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 用户点击了确定按钮
                this.$http.post('/admin/clas/del', {
                    id: data.id,
                    state: "-1"
                }).then(result => {
                    if (result.code === 200) {
                        this.$message.success(result.msg);
                        this.fetchAdminList();
                    } else {
                        this.$message.error(result.msg);
                    }
                });
            }).catch(() => {
                // 用户点击了取消按钮
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },


        submitForm() {
            this.$refs.adminForm.validate(valid => {
                if (valid) {
                    // 假设后端接口需要 id 来确定要编辑的记录，这里将 adminForm 中的 id 一起传递
                    this.$http.post('/admin/clas/edit', this.adminForm).then(result => {
                        if (result.code === 200) {
                            this.$message.success(result.msg);
                            this.addDialogVisible = false;
                            this.editDialogVisible = false;
                            this.fetchAdminList();
                        } else {
                            this.$message.error(result.msg);
                        }
                    });
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
/deep/ .el-dialog__header{
    padding: 10px !important;
    text-align: center;
}
.admin-page {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

    .page-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f2f5;

        .header-title {
            font-size: 20px;
            font-weight: 600;
            color: #1f2937;
            line-height: 1.4;
        }
    }

    .table-header {
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-title {
            font-size: 16px;
            font-weight: 500;
            color: #374151;
        }

        .table-actions {
            .el-button {
                margin-left: 12px;
                transition: all 0.3s;

                &:hover {
                    transform: translateY(-1px);
                }
            }
        }
    }

    .el-tabs {
        margin-top: 16px;

        :deep(.el-tabs__header) {
            margin-bottom: 28px;
            border-bottom: 2px solid #f0f2f5;
        }

        :deep(.el-tabs__item) {
            font-size: 15px;
            padding: 0 28px;
            height: 44px;
            line-height: 44px;
            transition: all 0.3s;

            &.is-active {
                color: #2563eb;
                font-weight: 500;
            }

            &:hover {
                color: #2563eb;
            }
        }

        :deep(.el-tabs__active-bar) {
            height: 2px;
            background-color: #2563eb;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
    }

    .el-table {
        margin-top: 12px;
        border-radius: 8px;
        overflow: hidden;

        :deep(th) {
            background-color: #f9fafb !important;
            font-weight: 500;
            color: #4b5563;
        }

        :deep(td) {
            padding: 12px 0;
        }

        .delete-btn {
            color: #dc2626;
            transition: all 0.3s;

            &:hover {
                color: #ef4444;
            }
        }
    }

    .el-pagination {
        margin-top: 24px;
        padding: 12px 0;
        text-align: right;

        :deep(.el-pagination__total) {
            margin-right: 12px;
        }

        :deep(.btn-prev),
        :deep(.btn-next) {
            border-radius: 4px;
            background-color: #fff;
        }

        :deep(.el-pager li) {
            border-radius: 4px;
            background-color: #fff;

            &.active {
                background-color: #2563eb;
            }
        }
    }

    .el-dialog {
        border-radius: 12px;
        overflow: hidden;
        max-height: 90vh;
        display: flex;
        flex-direction: column;

        :deep(.el-dialog__header) {
            padding: 20px 24px !important;
            border-bottom: 1px solid #f0f2f5;
            margin: 0;

            .el-dialog__title {
                font-size: 18px;
                font-weight: 600;
                color: #1f2937;
            }
        }

        :deep(.el-dialog__body) {
            padding: 32px 24px;
            flex: 1;
            overflow-y: auto;

            .el-form-item {
                .el-input,
                .el-select {
                    width: 320px;
                }
            }
        }

        :deep(.el-tree) {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            padding: 10px;
        }

        :deep(.el-dialog__footer) {
            padding: 16px 24px;
            border-top: 1px solid #f0f2f5;
        }

        :deep(.el-form-item__label) {
            font-weight: 500;
            color: #374151;
        }

        :deep(.el-button) {
            padding: 8px 20px;
            transition: all 0.3s;

            &:hover {
                transform: translateY(-1px);
            }
        }
    }
}
.tip-text {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    display: block;
}
/deep/ .el-tab-pane{
    height: 650px;
    overflow-y: auto;
}

</style>

-->
